<template>
      <div>
            <el-menu class="el-menu-vertical-demo" :collapse="props.menuCollapse" @open="handleOpen" @close="handleClose"
                  active-text-color="#fff" background-color="#001529" text-color="rgb(110, 110, 110)">
                  <el-menu-item index="1">
                        <el-icon>
                              <DataBoard />
                        </el-icon>
                        <span>工作台</span>
                  </el-menu-item>
                  <el-menu-item index="2">
                        <el-icon>
                              <DataBoard />
                        </el-icon>
                        <span>仪表盘</span>
                  </el-menu-item>
                  <el-sub-menu index="3">
                        <template #title>
                              <el-icon>
                                    <location />
                              </el-icon>
                              <span>动态</span>
                        </template>

                        <el-menu-item index="3-1">动态管理</el-menu-item>
                        <el-menu-item index="3-2">动态管理</el-menu-item>

                        <el-menu-item index="3-3">动态管理</el-menu-item>

                  </el-sub-menu>
                  <el-sub-menu index="4">
                        <template #title>
                              <el-icon>
                                    <Document />
                              </el-icon>
                              <span>权限管理</span>
                        </template>

                        <el-menu-item index="4-1">权限管理</el-menu-item>
                        <el-menu-item index="4-2">权限管理添加</el-menu-item>


                        <el-menu-item index="4-3">权限规则</el-menu-item>
                  </el-sub-menu>
                  <el-menu-item index="5">
                        <el-icon><icon-menu /></el-icon>
                        <span>页面设置</span>
                  </el-menu-item>
                  <el-menu-item index="6">
                        <el-icon>
                              <setting />
                        </el-icon>
                        <span>系统设置</span>
                  </el-menu-item>
            </el-menu>
      </div>
</template>

<script lang="ts" setup>
import {
      Document,
      Menu as IconMenu,
      Location,
      Setting,
      DataBoard
} from '@element-plus/icons-vue'
import { reactive } from 'vue';

let props = defineProps({
      menuCollapse: { default: false }
})

const handleOpen = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
      console.log(key, keyPath)
}
</script>

<style scoped>
:global(.el-menu) {
      border-right: 0;
}

::v-deep .el-sub-menu {
      margin: 5px;
}

::v-deep .el-sub-menu .el-sub-menu__title {
      height: 42px;
      margin: 5px 0;
      padding-left: 15px;
      font-weight: bold;
      font-size: 14px;
}
::v-deep .el-menu-item {
      margin: 5px;
      font-weight: bold;
      height: 42px;
      font-size: 14px;
      line-height: 42px;
      border-radius: 10px;
      padding-left: 15px;
}

::v-deep .el-menu-item.is-active {
      background-color: rgba(0, 0, 255, 1) !important;
}

::v-deep .el-sub-menu ul {
      padding: 5px 0;
      background-color: rgb(20, 20, 20);
}

::v-deep .el-menu-item span,
::v-deep .el-sub-menu span {
      width: 82px;
}
</style>